html { background-color: #ccc; }
body {  
    width: 1000px; height: 600px;
    margin-left: -500px;  margin-top: -300px;
    position: absolute; top: 50%; left: 50%;
    overflow: hidden;
    color: #fff; 
    background: black ;
    background-size: 90px;
}
/* A section is a slide. Its size is 800x600, and this will never change */
section {
    font-family: Garamond, Times, serif;
    font-size: 28pt;
    line-height: 28pt;
}
section > * { margin-bottom: 1em; }
section > p { 
margin-left: 80px;
margin-left: 100px; 
}
section.titleslide h1 { margin-top: 200px; }
.titleslide {
  color: #f22;
  background: #ccc;
}
h1, h2, h3 {
    margin-top: 50px;
    text-align: center;
}
h1 { font-size: 180%; line-height: 100%; }
h2 { font-size: 120%; }
h3 { font-size: 100%; }
ul, ol {
    margin-left: 60px;
    margin-right: 80px;
}
li {
    margin-bottom: .1em;
}
a { color: #FF0066; } a:hover { text-decoration: underline; }
footer { position: absolute; bottom: 50px; right: 50px; }
blockquote { 
    margin-left: 100px;
    font-style: italic }

pre {
    color: black;
    font-size: 50%;
    line-height: 16pt;
    font-weight: bold;
    padding: 0.2em 1em 0.2em 1em;
}

.images {
    margin: auto;
    text-align: center;
}

img {
    width: 90%;
    background: white;
}


img.overlay {
    width: 70%;
    margin-top:-400px;
    margin-left:100px;
    background: none;
}

/* Transition effect */
/* Feel free to change the transition effect for original
   animations. See here:
   https://developer.mozilla.org/en/CSS/CSS_transitions
   How to use CSS3 Transitions: */
section {
    -moz-transition: left 400ms linear 0s;
    -webkit-transition: left 400ms linear 0s;
    -ms-transition: left 400ms linear 0s;
    transition: left 400ms linear 0s;
}

/* Before */
section { left: -150%; }
/* Now */
section[aria-selected] { left: 0; }
/* After */
section[aria-selected] ~ section { left: +150%; }

/* Increment with lists */
.incremental > * { opacity: 1; }
.incremental > *[aria-selected] { opacity: 1; }
.incremental > *[aria-selected] ~ * { opacity: 0.2; }
/* Increment with images */
.incremental > img[aria-selected] { box-shadow: 0 0 10px #000 }
